<template>
	<view class="search">
		<view class="search-t">
			<u-search placeholder="520礼包抢先领" v-model="keyword" shape="square" action-text="取消" @custom="backTo"
				@search="searchTo" @change="searchchange">
			</u-search>
		</view>
		<!-- 记录组件 -->
		<view class="record">
			<!-- 历史记录和热门搜索 -->
			<hots v-show="historyandhots == 1" :hotsList="hotsList" :historyList="historyList" @clickLabel="clickLabel"
				@lajiclear="lajiclear">
			</hots>
			<Goods v-show="historyandhots == 2" :goodlist="goodlist" @changegoods="changegoods" :keyword="keyword">
			</Goods>
			<List v-show="historyandhots == 3" :keyword="keyword" :Listarr="Listarr" @ToGoods="ToGoods"></List>
		</view>
	</view>
</template>

<script>
	let timer = null
	export default {
		data() {
			return {
				// 搜索框文本
				keyword: "",
				// 热门数组
				hotsList: [],
				// 历史数组
				historyList: [],
				// 历史记录显示状态
				historyandhots: 1,
				// 商品数组
				goodlist: [],
				// 节流
				Load: true,
				// 实时数组
				Listarr: [],
				// 默认页数
				currentPage: 1,
				// 当前页数
				totalPages: 0,
			}
		},
		// 触底加载更多
		onReachBottom() {
			if (this.currentPage < this.totalPages) {
				this.currentPage++
				// console.log(111);
				this.$request({
					url: '/goods/list',
					data: {
						size: 10,
						keyword: this.keyword,
						page: this.currentPage
					},
					successCb: res => {
						let {
							data,
							totalPages
						} = res
						this.goodlist = [...this.goodlist, ...data]
						// console.log(this.goodlist);
						// console.log(res);
						this.totalPages = totalPages
					}
				})
			}
		},
		onShow() {
			// console.log(22);
			this.$request({
				url: "/search/index",
				successCb: (res) => {
					// console.log(res);
					let {
						historyKeywordList,
						hotKeywordList
					} = res
					// console.log(historyKeywordList, hotKeywordList);
					this.historyList = historyKeywordList
					this.hotsList = hotKeywordList
				}
			})
			// 实时
			this.$request({
				url: '/search/helper',
				data: {
					keyword: this.keyword
				},
				successCb: res => {
					// console.log(res);
					this.Listarr = res
				}
			})
		},
		methods: {
			// 点击取消返回上一页
			backTo() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 回车搜索商品
			searchTo() {
				this.historyandhots = 2
				// console.log(11);
				this.$request({
					url: '/goods/list',
					data: {
						keyword: this.keyword
					},
					successCb: res => {
						let {
							totalPages
						} = res
						this.goodlist = res.data
						// console.log(this.goodlist);
						// console.log(res);
						this.totalPages = totalPages
					}
				})
			},
			// 点击标签搜索
			clickLabel(la) {
				// console.log(la);
				this.keyword = la
				this.$request({
					url: '/goods/list',
					data: {
						keyword: la
					},
					successCb: res => {
						this.goodlist = res.data
						this.historyandhots = 2
						// console.log(res.data);
					}
				})
			},
			// 点击分类渲染
			changegoods(data) {
				this.goodlist = data
			},
			// 删除记录
			lajiclear() {
				this.historyList = []
			},
			// 输入框内容改变时
			searchchange(val) {
				this.historyandhots = 3
				if (timer) {
					clearTimeout(timer)
				}
				timer = setTimeout(() => {
					this.$request({
						url: "/search/helper",
						data: {
							keyword: val
						},
						successCb: res => {
							this.Listarr = res
						}
					})
				}, 500)

			},
			// 点击列表搜索
			ToGoods(item) {
				// console.log(item);
				this.keyword = item
				this.$request({
					url: '/goods/list',
					data: {
						keyword: item
					},
					successCb: res => {
						this.goodlist = res.data
						this.historyandhots = 2
						// console.log(res.data);
					}
				})
			}
		},
		onUnload() {
			// 页面销毁的时候清除定时器
			clearTimeout(timer)
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #efefef;
	}

	.search {

		.search-t {
			background-color: #fff;
			height: 120rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;
			font-family: '楷体';
		}
	}

	.record {
		width: 750rpx;
		background-color: #efefef;
	}
</style>
